<template>
  <div class="textAlign" style="background: #fff">
    <dc-row class="boederBottom">
      <div>
        <dc-col class="box" span="6">
          <div v-bind:class="{ box666: datatype == 1 }" @click="_pick" v-bind:data-type=1>
            日<span></span>
          </div>
        </dc-col>
        <dc-col class="box" span="6">
          <div v-bind:class="{ box666: datatype == 2 }" @click="_pick" v-bind:data-type=2>
            周<span></span>
          </div>
        </dc-col>
        <dc-col class="box" span="6">
          <div v-bind:class="{ box666: datatype == 3 }" @click="_pick" v-bind:data-type=3>
            月<span></span>
          </div>
        </dc-col>
        <dc-col class="box" span="6">
          <div v-bind:class="{ box666: datatype == 4 }" @click="_pick" v-bind:data-type=4>
            年<span></span>
          </div>
        </dc-col>
      </div>
    </dc-row>
    <dc-row style="margin-top: 0.5rem">
      <dc-col class="box2" style="text-align: right" span="7">
        <div class="icon" @click="leftArrow"><span class=" iconfont icon-left">      </span></div>
      </dc-col>
      <dc-col class="box2" span="10"><div @click='opendatepicker'>{{ showdate }}</div></dc-col>
      <dc-col class="box2" style="text-align: left" span="7">
        <div class="icon" @click="rightArrow"><span class=" iconfont icon-right">        </span></div>
      </dc-col>
    </dc-row>
  </div>
</template>
<script>
  import {col, row} from '@/common/Flex';
  import common from './common.vue';
  import mintUi from '../../mintUi';

  export default {
    name: 'all',
    data () {
      return {
        datatype: 1,
        date: Date.parse(new Date())
      };
    },
    mixins: [common],
    methods: {
      //调取packer方法
      opendatepicker: function () {
        if (+this.datatype === 1 || +this.datatype === 2) {
          let crtdate = new Date(this.date);
          let that = this;
          this.$store.dispatch('setDatePiker', {
            value: crtdate.getFullYear() + '-' + (crtdate.getMonth() + 1) + '-' + (crtdate.getDate()),
            method: function (result) {
              if (that.isFuture(Date.parse(result))) {
                mintUi.openToast('暂无数据');
              } else {
                that.date = Date.parse(result);
              }
            }
          });
        } else if (+this.datatype === 3) {
          let crtdate = new Date(this.date);
          let that = this;
          this.$store.dispatch('setDatePickerym', {
            value: [crtdate.getFullYear(), crtdate.getMonth() + 1],
            method: function (result) {
              if (that.isFuture(that.getDateNum(result[0]['value'], result[1]['value'] - 1))) {
                mintUi.openToast('暂无数据');
              } else {
                that.date = that.getDateNum(result[0]['value'], result[1]['value'] - 1);
              }
            }
          });
        } else if (+this.datatype === 4) {
          let crtdate = new Date(this.date);
          let that = this;
          this.$store.dispatch('setDatePickern', {
            value: [crtdate.getFullYear()],
            method: function (result) {
              if (that.isFuture(that.getDateNum(result[0]['value']))) {
                mintUi.openToast('暂无数据');
              } else {
                that.date = that.getDateNum(result[0]['value']);
              }
            }
          });
        } else {
          console.log(1);
        }
      }
    },
    components: {
      'dc-col': col,
      'dc-row': row
    }
  };
</script>
<style lang="scss" scoped>
  @import '../../../assets/css/variable';

  .textAlign {
    text-align: center
  }

  .boederBottom {
    border-bottom: 1px solid #e9e9e9;
  }

  .box {
    box-sizing: border-box;
    line-height: px2rem(85px);
    height: px2rem(70px);
    margin-top: px2rem(10px);
    position: relative;
    overflow: hidden;
    color: #666666;
    font-size: px2rem(28px);
  }

  .box2 {
    line-height: px2rem(70px);
    color: #999;
    font-size: px2rem(26px);
  }
  .box2 .icon {
    padding: 0 10px;
  }
  .box span {
    position: absolute;
    top: px2rem(64px);
    left: -100%;
    display: inline-block;
    width: 70%;
    height: px2rem(6px);
    background: $theme-color;
  }

  .box666 {
    width: 70%;
    margin: 0 15%;
    color: $theme-color;
    /*<!--border-bottom: 2px solid $theme-color;-->*/
  }

  .box666 span {
    left: 15%;
    /*transition: all .1s ease;*/
  }
</style>
